<template>
    <div class="comments"
         :style="{
            'background': $store.state.nowTime==='moon' ? '#262525' : '#fff',
            'color': $store.state.nowTime==='moon' ? '#fff' : '#8f8c8c'
            }">
        <p class="comments_title">
            评论区
        </p>
        <ul v-for="(item,index) in total_comments">
          <li
            :style="{
            'background': $store.state.nowTime==='moon' ? '#262525' : '#fff',
            'color': $store.state.nowTime==='moon' ? '#fff' : '#8f8c8c'}">
              <ReplyBox :comments="item" @handleCommentSend="handleCommentSend"></ReplyBox>
            </li>
        </ul>
    </div>

    <p v-if="essays.index < commentsLength" class="footer" @click="addComments">
      查看更多评论
    </p>
    <div v-else class="footer"
         :style="{
            'background': $store.state.nowTime==='moon' ? '#262525' : '#fff',
            'color': $store.state.nowTime==='moon' ? '#fff' : '#8f8c8c'
            }"
    >
        没有更多评论了~
    </div>

</template>

<script>
import ReplyBox from "@/components/detail/ReplyBox.vue";
import api from "@/api";
import CommentReplies from "@/components/detail/CommentReplies.vue";

export default {
    name: "Comments",
    components: {CommentReplies, ReplyBox},
    props:{
        comments:Array,
        // lengthes:Number
    },
    emits: ['handleCommentSend'],
    data(){
        return{
            total_comments:"",
            content:[],
            essays:{
                wid:"",
                index:1,
            },
            path:[],
            uid:"",
            articleDetails:"",
            commentsLength:"",
            del:{
                uid:"",
                delUid:"",
                delCid:"",
            },


        }
    },
    watch:{
        comments(newData,prevData){
            if(newData && newData.length > 0){
                this.total_comments= newData[0] //获取父组件传来的值評論
                this.commentsLength = newData[1]
            }
        }
    },
    mounted() {
        if(window.localStorage.getItem("AUTHORIZATION_TOKEN")){
            this.user_id =JSON.parse( window.localStorage.getItem("user")).uid;

        }
        if( JSON.parse( window.localStorage.getItem("ArticleDetails")))
           this.essays.wid = JSON.parse( window.localStorage.getItem("ArticleDetails")).wid;


    },
    methods: {
        //下一页评论
        addComments(){
            let _this = this;
            _this.essays.index+=1;
                api.articleComments(_this.essays).then((res)=>{
                  this.total_comments.push.apply(this.total_comments,res.data.data[0])
                });
         },

        handleCommentSend(){
            this.$emit("handleCommentSend")
        },
    }


}
</script>

<style scoped>
.comments{
    min-height: 20vh;
    background: #eceff3;
    padding: 10px;
    border-radius: 5px;
    margin-top: 2vh;
    animation: comments .8s ease-in-out 0s 1 forwards;
}
@keyframes comments{
    0%{
        transform: scale(0);
    }
    50%{
        transform: scale(1.05);
    }
    100%{
        transform: scale(1);
    }
}
.comments ul{
      list-style: none;
}
.comments_title{
    padding: 10px 10px;
    border-bottom: 1px solid #b4b9b4;
    margin-bottom: 2vh;
}
.comments ul li{
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  background: white;
  padding: 1vw;
  margin-top: 10px;
  border-radius: 5px;
  box-shadow: 0 0 5px 0 rgb(147, 138, 138,.5);
  animation: size .5s ease-in-out 0s 1 forwards;
}
@keyframes size {
    0%{
    opacity: 0;
    }100%{
    opacity: 1;
         }
}
.footer,p{
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    height: 30px;
}
p:hover{
    cursor: pointer;
    opacity: 0.7;
}
p{
    height: 50px;
    background: rgba(248, 248, 248, 0.3);
}
img{
    position: absolute;
    right: 2%;
    bottom: 5%;
    width: 1.5vw;
}
img:hover{
   cursor: pointer;
   opacity: .8;
}

@media (min-width: 0) and (max-width: 600px) {
    .comments{
        width: 380px;
    }

}
</style>